<template>
  <div class="sidebar">
    <!--  :default-active="onRoutes"       background-color="#fff"    @select="handleSelect"-->
    <el-scrollbar>
      <el-menu class="sidebar-el-menu" default-active="1" :unique-opened="false" router mode="horizontal"
        text-color="#333333" active-text-color="#01957D" unique-opened @select="handleSelect">
        <template v-for="(item, index) in items">
          <template v-if="item.children">
            <el-submenu :index="item.menuCode" :key="item.index">
              <template #title>
                <!-- 选中子级的菜单父级也选中 -->
                <img class="homeIcon" :src="item.menuClickIco" v-if="activeIndex == index" />
                <img class="homeIcon" :src="item.menuIco" v-else />
                <!-- <i :class="item.icon"></i> -->
                <a class="link" v-if="item.menuType == 2" :href="item.menuUrl" target="_blank">
                  {{ item.menuName }}
                </a>
                <span v-else>{{ item.menuName }}</span>
              </template>
              <template v-for="subItem in item.children">
                <el-submenu v-if="subItem.children" :index="subItem.menuCode" :key="subItem.index">
                  <template #title>
                    <!-- 二级菜单选中图片 -->
                    <img class="homeIcon" :src="subItem.menuClickIco" v-if="activeRouter == subItem.menuCode" />
                    <img class="homeIcon" :src="subItem.menuIco" v-if="subItem.menuIco" />
                    <a class="link" v-if="subItem.menuType == 2" :href="subItem.menuUrl" target="_blank">
                      {{ subItem.menuName }}
                    </a>
                    <span v-else>{{ subItem.menuName }}</span>
                  </template>
                  <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.menuCode">
                    <!-- 三级菜单选中图片 -->
                    <img class="homeIcon" :src="threeItem.menuClickIco" v-if="activeRouter == threeItem.menuCode" />
                    <img class="homeIcon" :src="threeItem.menuIco" v-else />
                    <a class="link" v-if="threeItem.menuType == 2" :href="threeItem.menuUrl" target="_blank">
                      {{ threeItem.menuName }}
                    </a>
                    <span v-else>{{ threeItem.menuName }}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index="subItem.menuCode" :key="subItem.index">
                  <!-- 二级菜单选中图片 -->
                  <img class="homeIcon" :src="subItem.menuClickIco" v-if="activeRouter == subItem.menuCode" />
                  <img class="homeIcon" :src="subItem.menuIco" v-else />
                  <a class="link" v-if="subItem.menuType == 2" :href="subItem.menuUrl" target="_blank">
                    {{ subItem.menuName }}
                  </a>
                  <span v-else>{{ subItem.menuName }}</span>
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.menuCode" :key="item.index">
              <!-- <i :class="item.icon"></i> -->
              <!-- 一级菜单选中图片 -->
              <img class="homeIcon" :src="item.menuClickIco" v-if="activeRouter == item.menuCode" />
              <img class="homeIcon" :src="item.menuIco" v-else />
              <template #title>{{ item.menuName }}</template>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { computed, watch } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { ref, reactive } from "vue";
import api from "../api/api";
import sidebarMenu from "./sidebar.json";
export default {
  setup(props, context) {
    let items = ref([]);
    const userInfojson = localStorage.getItem("userInfo");
    const userInfo = JSON.parse(userInfojson);
    const getClientMenu = () => {
      api
        .getListAPI("auth/clientMenu/clientMenu", {
          userId: userInfo.id
        })
        .then((res) => {
          items.value = res.data.data;
          getFlowList();
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    if (userInfo) {
      getClientMenu();
    }
    const getFlowList = () => {
      let flowList = [];
      api
        .postFormAPI("carbon/client/carbon/flow/config/getList", {
          isNormal: 1,
        })
        .then((res) => {
          if (res.data.code == 1) {
            for (var i = 0; i < res.data.data.length; i++) {
              flowList.push({
                menuCode: "/CarbonTicket?id=" + res.data.data[i].id + "&menuName=" + res.data.data[i].menuName,
                menuName: res.data.data[i].menuName
              });
            }
            console.log(flowList)
            for (var i = 0; i < items.value.length; i++) {
              if (items.value[i].children) {
                if (items.value[i].isCarbon == 1) {
                  items.value[i].children = flowList;
                  break;
                } else {
                  for (var j = 0; j < items.value[i].children.length; j++) {
                    if (items.value[i].children && items.value[i].children[j].isCarbon == 1) {
                      items.value[i].children[j].children = flowList;
                      break;
                    }
                  }
                }
              }
            }
            console.log(items.value)
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };

    const route = useRoute();

    const onRoutes = computed(() => {
      return route.path;
    });
    const router = useRouter();
    const store = useStore();
    const collapse = computed(() => store.state.collapse);
    const activeRouter = ref(null);
    const activeIndex = ref(null);
    const handleSelect = (event) => {
      activeRouter.value = event;
      context.emit("handleSelect", event);
      // 获取下拉菜单，父级的index，
      for (var i = 0; i < items.value.length; i++) {
        if (items.value[i] && items.value[i].children) {
          for (var j = 0; j < items.value[i].children.length; j++) {
            if (event == items.value[i].children[j].menuCode) {
              activeIndex.value = i;
              return
            } else {
              activeIndex.value = null;
            }
            if (items.value[i].children[j] && items.value[i].children[j].children) {
              for (var z = 0; z < items.value[i].children[j].children.length; z++) {
                if (event == items.value[i].children[j].children[z].menuCode) {
                  activeIndex.value = i;
                  return
                } else {
                  activeIndex.value = null
                }
              }
            }
          }
        }
      }
    };
    return {
      items,
      onRoutes,
      collapse, activeRouter, activeIndex,
      handleSelect,
    };
  },
};
</script>

<style lang="less" scoped>
.sidebar {
  display: block;
  margin: 0 auto;
  position: absolute;
  width: 100%;
  top: 70px;
  height: 60px;
  display: flex;
  z-index: 99;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid rgb(207, 207, 207);
}

.el-dropdown-menu,
.el-menu {
  background: none;
}

.el-menu {
  border: none;
  display: flex;
}

&:deep(.el-submenu .el-menu) {
  box-shadow: 0px 1px 10px #6e6c6c;
}

a {
  color: rgb(51, 51, 51);
  border-bottom-color: transparent;
  width: auto;
  font-weight: bold;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  // width: 250px;
}

.el-menu-item {
  font-weight: bold;
}

&:deep(.el-menu-item i) {
  font-weight: bold;
}

&:deep(.el-submenu__menuName i) {
  font-weight: bold;
}

&:deep(.el-submenu__menuName) {
  font-weight: bold;
}

&:deep(.el-submenu__title span) {
  font-weight: bold;
}

.sidebar>ul {
  height: 100%;
  display: flex;
}

// &:deep(.el-menu--horizontal > .el-menu-item.is-active) {
//   border-bottom: 0px !important;
//   border-bottom-color: #fff !important;
// }

&:deep(.el-menu--horizontal>.el-menu-item.is-active) {
  border-bottom: 0px !important;
  border-bottom-color: #fff !important;
}

&:deep(.el-menu--horizontal>.el-submenu.is-active .el-submenu__title) {
  border-bottom: 0px !important;
  border-bottom-color: #fff !important;
}

&:deep(.el-menu.el-menu--horizontal) {
  border-bottom: 0px;
}

.homeIcon {
  width: 20px;
  position: relative;
  right: 5px;
}

// .sidebar {
//   display: block;
//   position: absolute;
//   left: 0;
//   top: 70px;
//   bottom: 0;
//   height: 100%;
//   overflow-y: scroll;
// }
// .sidebar::-webkit-scrollbar {
//   width: 0;
// }
// .sidebar-el-menu:not(.el-menu--collapse) {
//   border-left: 1px solid #82d342;
//   width: 10.5rem;
// }
// .sidebar > ul {
//   height: 100%;
// }
// .el-menu-item.is-active {
//   // background-color: #a3eb6ca9 !important;
//   color: #fff;
//   span {
//     color: #fff !important;
//   }
// }
// .el-menu-item:hover {
//   background: rgba(144, 236, 74, 0.158) !important;
//   color: #82d342 !important;
// }
// &:deep(.el-submenu .el-menu-item) {
//   min-width: 160px;
// }
// .sidebar {
//   display: block;
//   margin: 0 auto;
//   position: absolute;
//   width: 90%;
//   /* top:70px; */
//   height: 60px;
//   display: flex;
//   z-index: 999;
//   left: 0;
//   right: 0;

//   background: #fff;
//   border-bottom: 1px solid rgb(207, 207, 207);
// }
// .el-dropdown-menu,
// .el-menu {
//   background: none;
// }
// .el-menu {
//   border: none;
// }
// &:deep(.el-submenu .el-menu) {
//   box-shadow: 0px 1px 10px #6e6c6c;
// }
// .sidebar::-webkit-scrollbar {
//   width: 0;
// }
// .sidebar-el-menu:not(.el-menu--collapse) {
//   width: 250px;
// }
// .sidebar > ul {
//   height: 100%;
//   display: flex;
// }
</style>
